<template>
    <div id="index" >
        <header class="tc w100">
            <div class="title pr pr20 pl20">
                <img @click="goHome" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn">车辆维修</h1>
            </div>
        </header>
        <div class="bcfff mapContent mr20 ml20">
            <div id="map1" class=""></div>
        </div>
        <div class="content bcfff pt30 pb30" v-for="(el,index) in listTable">
            <div  class="dress mb30">
                <ul @click.self="storeDetails(el)">
                    <li >
                        <h2 class="f30">{{el.name}}</h2>
                        <p class="mt15">
                            <van-icon v-for="(el,index) in el.star" :key="index" name="star" color="rgb(255,191,0)" size="20rem"></van-icon>
                            <span class="f25 ml15">{{el.star}}分</span>
                        </p>
                        <p class="mt15 f25">
                            营业时间:{{renderTime(el.modifyTime)}}
                        </p>
                        <p class="mt15 f25">
                            位置：{{el.address}}
                        </p>
                    </li>
                    <li>
                        <p class="distance fr mb25 f25">{{distance}}m</p>
                        <div>
                            <img :src="el.idPictureFront" alt="">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="btn mt40 tc">
                <button @click="shop1(el.tel)" class="shop mr70 ">
                    <img class="mr15 mb5" src="../../../assets/img/car-repair-img/phone.png" alt="">
                    <span class="f25">联系门店</span>
                </button>
                <button class="destined" @click="goDestined(el)">
                    <img class="mr15 mb5" src="../../../assets/img/car-repair-img/pre-book.png" alt="">
                    <span class="f25">立即预定</span>
                </button>
            </div>
            <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
                <div class="shop-load bcfff">
                    <p id="xx" class="pt25 pb25 f25">{{ phone }}</p>
                    <p @click="copy" class="pb25 pt25 f25 copy1">复制</p>
                    <p @click="cancel" class="f25 mt25 mb25">取消拨号</p>
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script>
import {search } from '../../../api/Repair';
export default {
    data() {
        return {
            listTable:[],
            id:'',
            // 联系门店
            isShow: false,
            phone:'',
            seat:'山阳区人民路与解放路交叉口',
            storeName:'',
            // 距离
            distance:'556',
            // 评分星星数量
            grade:0,
            // 营业时间
            yesj:'',
            // 弹框，是否底部弹出
            show: false,
        }
    },
    methods: {
        shop1(tel) {
            this.show = true;
            this.phone =tel
        },
        copy(){
            this.show = !this.show;
            console.log(this.phone);
        },
        cancel(){
            this.show = !this.show;
        },
        goDestined(el){
            this.$router.push({
                path:'/immediatelyReservation',query:{el}
            })
        },
        storeDetails(el){
            this.$router.push({
                path:'/storeDetails',query:{el}
            })
        },
        goHome(){
            this.$router.push('home')
        },
        renderTime(date) {
            var dateee = new Date(date).toJSON();
            return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        }
    },
    mounted() {
        var map = new BMapGL.Map("map1");
        map.centerAndZoom(new BMapGL.Point(118.800697,32.064162), 14);
        map.enableScrollWheelZoom();
        // 创建标注对象并添加到地图  
        var myIcon = new BMapGL.Icon(require('../../../assets/img/car-repair-img/stores-tab.png'), new BMapGL.Size(20, 30), {
            anchor: new BMapGL.Size(10, 30),
        });
        var point = new BMapGL.Point(118.790359,32.049116);
        var marker = new BMapGL.Marker(point, { icon: myIcon });
        map.addOverlay(marker);
        const that = this
         // 自定义展示内容
        function createDOM() {
            var div = document.createElement('div');
            div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
            div.style.color = 'black';
            div.style.height = '42rem';
            div.style.width = '142rem';
            div.style.lineHeight = '42rem';
            div.style.whiteSpace = 'nowrap';
            div.style.MozUserSelect = 'none';
            div.style.fontSize = '20rem';
            div.style.borderRadius = '50rem';
            div.style.alignItems = 'center';
            var span = document.createElement('span');
            span.style.lineHeight = '16px';
            span.style.whiteSpace = 'normal';
            span.style.position = 'absolute'
            span.style.top = '-104rem'
            span.style.left = '14rem'
            span.style.color = 'white';
            div.appendChild(span);
            span.appendChild(document.createTextNode(this.properties.text));
            let img = document.createElement('img');
            img.style.width = '100%';
            img.style.position = 'absolute'
            img.style.top = '-110rem'
            img.style.left = '0'
            img.style.zIndex= '-1'
            img.src = this.properties.imgSrc;
            div.appendChild(img);
            return div;
        }
        // 创建自定义覆盖物
        var customOverlay = new BMapGL.CustomOverlay(createDOM, {
        point: new BMapGL.Point(118.792084,32.051258),
            opacity: 0.5,
            offsetY: -10,
            properties: {
                text: '附近门店 >',
                imgSrc: require('@/assets/img/car-repair-img/nearby-stores.png')
            }
        });
        map.addOverlay(customOverlay);
        customOverlay.addEventListener('click', function (e) {
            that.$router.push({
                path: '/nearbyStores'
            })
        });
        search({
            categoryId: 2
        })
        .then(r=>{
            this.listTable = r.data;
            // console.log(this.listTable);
        })
    }
}
</script>
<style scoped>
.BMap_cpyCtrl {display: none;}
.anchorBL{display:none;}
#index {position: relative;z-index: 0;overflow: hidden;}
#index .content {padding: 0 20rem;}
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
#map1{ width: 100%;height: 800rem;border-radius: 20rem 20rem 0 0;}
.dress ul {display: flex;justify-content: space-between;}
.dress ul li div img{height: 150rem;width: 210rem;margin-left: 20rem;}
.dress ul li .distance{color: #4c80cd;}
.dress ul li p img{width: 25rem;height: 25rem;}
#index .mapContent{padding: 20rem 20rem 0 20rem;border-radius: 20rem 20rem 0 0;margin-top:-290rem;}
#index .content .shop{width: 290rem; border: none; border-radius: 150rem;padding: 20rem 0;}
#index .destined{padding: 20rem 0; width: 290rem; border: none; border-radius: 150rem;}
#index .shop{background-color: #3689ff;}
#index .destined{background-image: linear-gradient( 90deg,  rgb(255,117,57),rgb(255,64,1));}
#index .shop img{width: 30rem;height: 30rem;vertical-align: middle;}
#index .destined img{width: 30rem;height: 30rem;vertical-align: middle;}
#index .shop,.destined span{color: white;}
#index .shop-load .copy1{ border-bottom: 1px solid rgb(243, 243, 243);border-top: 1px solid rgb(243, 243, 243);}
>>> .van-overlay{background-color: rgba(0, 0, 0, 0.1) !important;}
>>> .van-popup--bottom{border-radius: 15rem 15rem 0 0;text-align: center;}
</style>